<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_computed实现</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    1. 计算属性：要显示的数据不存在，是通过计算得来的
    2. fullName() 函数底层用到的是 setter 和 getter 方法
    3. get() 执行时机：
        (1). 初始显示会执行一次，得到初始值去显示
        (2). 当依赖的数据发生改变时会被再次调用 get()
       set() 执行时机：
        给计算属性设值时调用
    4. 优势：与 methods 实现相比，内部有缓存机制，效率更高
    5. 注意：计算属性是用于直接读取使用的，不要加()
-->
<div id="root">
    姓：<input type="text" v-model="first_name" placeholder=""><br/>
    名：<input type="text" v-model="last_name" placeholder=""><br/>
    <!-- 模板语言不仅能读取 data 还能读取 computed -->
    <span>全名：{{fullName}}</span><br/>
    <!-- 缓存机制，只调用1次 get，如果是 methods 则会调用4次 -->
    <!--<span>全名：{{fullName}}</span><br/>-->
    <!--<span>全名：{{fullName}}</span><br/>-->
    <!--<span>全名：{{fullName}}</span><br/>-->
    <!--<span>全名：{{fullName}}</span><br/>-->
    全名：<input type="text" v-model="fullName" placeholder=""><br/>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            first_name: 'Kris',
            last_name: 'Wu'
        },
        // 与 data 一样会挂载到 vm 上
        computed: {
            /*
             * 谁在调用？
             * Vue 调用，所以 this 指向 vm
             *
             * 调用时机
             * 1. fullName 初次渲染
             * 2. 当依赖的属性值发生变化
             */

            // 简写
            // fullName(){
            //     // 通过输出来验证，当依赖的属性发生变化时是否会被调用
            //     console.log("fullName-调用");
            //     return this.first_name + '-' + this.last_name;
            // },

            // 完整
            fullName: {
                // 调用时机：直接修改 fullName 时调用，set 中的 this 是 vm，set 可以接收预修改的值
                set(value){
                    console.log("set-被调用了");
                    const name = value.split('-');
                    this.first_name = name[0];
                    this.last_name = name[1];
                },
                // 调用时机：读取 fullName 时调用，get 中的 this 是 vm
                get(){
                    console.log("get-被调用了");
                    return this.first_name + '-' + this.last_name;
                }
            }
        }
    })
</script>
</body>
</html>
